<template>
  <div class="recordinfo">
    <el-table
      :data="recordInfoData"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column
        prop="acceptStatusName"
        label="当前状态"
      ></el-table-column>
      <el-table-column
        prop="applyName"
        label="到货验收申请"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="arrivedTime"
        label="到货时间"
        width="140"
      ></el-table-column>
      <el-table-column prop="dhqdAttachment" label="到货清单" width="250">
        <template #default="{ row }">
          <el-link
            type="primary"
            v-for="item in parseDataTransfer(row?.dhqdAttachment)"
            :key="item?.uuidFile"
            icon="el-icon-folder"
            @click.prevent="handleDownload(item)"
          >
            {{ item?.fileName }}&emsp;
          </el-link>
        </template>
      </el-table-column>
      <el-table-column
        prop="acceptUserNames"
        label="现场验收人"
        width="120"
      ></el-table-column>
      <el-table-column label="现场验收结果" width="120">
        <template #default="{ row }">
          <el-button type="text" v-if="row.results" @click="handleLook(row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="approveUserName" label="审批人"></el-table-column>
      <el-table-column prop="approvePoint" label="审批意见"></el-table-column>
      <el-table-column
        prop="accApprovalTime"
        label="审批时间"
        width="110"
      ></el-table-column>
    </el-table>
    <!-- dialog -->
    <el-dialog
      title="验收结果查看"
      v-model="dialogVisible"
      destroy-on-close
      width="600px"
    >
      <result-view v-model:dialogVisible="dialogVisible" :recodId="recodId" />
    </el-dialog>
    <!-- <el-button type="primary" @click="dialogVisible = true"
      >打开验收结果</el-button
    > -->
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from "vue";
import ResultView from "../dialog/ResultView.vue";
import { download } from "/@/utils/download";

let dialogVisible = ref<boolean>(false);
let recodId = ref(null);
defineProps({
  recordInfoData: {
    type: Array,
    require: true,
    default: () => []
  }
});

const parseDataTransfer = data => {
  if (!data) return [];
  return JSON.parse(data);
};

const handleLook = row => {
  dialogVisible.value = true;
  recodId.value = row.id;
};

const handleDownload = item => {
  if (!item) return;
  download(item);
};
</script>

<style lang="scss" scoped>
.recordinfo {
  :deep .el-dialog__body {
    padding: 20px 20px 8px 20px;
  }
  // :deep .el-dialog__header {

  // }
}
</style>
